<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <title>用户信息</title>
    <style>
        body {
            overflow-y: scroll;
            /* 确保滚动条始终可见 */
            -ms-overflow-style: scrollbar;
            scrollbar-width: thin;
            scrollbar-color: #888 #f0f0f0;
        }
    </style>
    <script>
        function checkUserInfo() {
            // 这里假设后端通过模板变量传递个人信息是否完善的标志
            const isInfoComplete = {{ is_info_complete|default(false) }};
            if (!isInfoComplete) {
                alert('请完善个人信息');
                window.location.href = "{{ url_for('goin') }}";
                return false;
            }
            return true;
        }
    </script>
</head>

<body class="bg-gray-100">
    <!-- 导航栏 -->
    <nav class="bg-blue-600 text-white p-4 h-16">
        <div class="container mx-auto flex justify-between items-center">
            <h1 class="text-2xl font-bold">用户信息</h1>
            <ul class="flex space-x-4">
                <li><a href="{{ url_for('dashboard') }}" class="hover:text-gray-300">数据大屏</a></li>
                <li><a href="{{ url_for('home') }}" class="hover:text-gray-300">首页</a></li>
                <li><a href="{{ url_for('index') }}" class="hover:text-gray-300">预测</a></li>
                <li><a href="{{ url_for('user') }}" class="hover:text-gray-300">用户</a></li>
            </ul>
        </div>
    </nav>
    <!-- 用户信息展示 -->
    <div class="container mx-auto py-8 px-4">
        <div class="bg-white p-8 rounded-lg shadow-md max-w-md mx-auto">
            <h1 class="text-3xl font-bold text-gray-800 mb-6">用户信息</h1>
            <div class="mb-6">
                <label for="username" class="block text-gray-700 text-sm font-bold mb-2">账号</label>
                <p id="username" class="w-full px-3 py-2 border border-gray-300 rounded-md">{{ user.username }}</p>
            </div>
            <div class="mb-6">
                <label for="realname" class="block text-gray-700 text-sm font-bold mb-2">用户姓名</label>
                <p id="realname" class="w-full px-3 py-2 border border-gray-300 rounded-md">{{ user.realname }}</p>
            </div>
            <div class="mb-6">
                <label for="id_card" class="block text-gray-700 text-sm font-bold mb-2">身份证号</label>
                <p id="idcard" class="w-full px-3 py-2 border border-gray-300 rounded-md">{{ user.idcard }}</p>
            </div>
            <div class="mb-6">
                <label for="phone" class="block text-gray-700 text-sm font-bold mb-2">手机号</label>
                <p id="phone" class="w-full px-3 py-2 border border-gray-300 rounded-md">{{ user.phone }}</p>
            </div>
            <!-- 添加修改用户信息的按钮 -->
            <div class="mb-6">
                <a href="{{ url_for('inreviseuser') }}" class="block w-full my-cta-button bg-blue-600 text-white p-2 rounded hover:bg-blue-700 text-center">修改用户信息</a>
            </div>
            <!-- 添加退出登录的按钮 -->
            <div class="mb-6">
                <a href="{{ url_for('logout') }}" class="block w-full my-cta-button bg-red-600 text-white p-2 rounded hover:bg-red-700 text-center">退出登录</a>
            </div>
        </div>
    </div>
</body>

</html>